<template>
	<div class="OptionsPage" v-if="showOptions" :style="{ 'overflow-y': 'hidden' }">
		<div class="title">
			<span class="title-text">{{ this.$t('options.title') }}</span>
		</div>
		<div class="btn" v-for="(item, index) in optionsData" :key="index">
			<Button type="success" @click="confirmOptions(item)">{{ item }}</Button>
		</div>
	</div>
</template>
<script>
export default {
	props: {
		showOptions: {
			type: Boolean,
			required: true,
			default: () => false
		},
		optionsData: {
			type: Array,
			required: true,
			default: () => []
		},
		responseMakeChoice: {
			type: Function,
			default: null
		},
		cmdId: {
			type: Number,
			default: () => 0
		},
		clientId: {
			type: String,
			default: () => ''
		}
	},
	data() {
		return {};
	},
	created() {},
	mounted() {},
	methods: {
		confirmOptions(item) {
			let data = { answer: item };
			this.responseMakeChoice(
				this.cmdId,
				'done',
				data,
				this.clientId,
				res => {
					console.log(res, 'response make-choice done success');
				},
				err => {
					console.log(err, 'response make-choice done error');
				}
			);
			this.$emit('confirmOptions');
		}
	}
};
</script>
<style scopde>
.OptionsPage {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	background: #ffffff;
	z-index: 9999999999;
}
.OptionsPage .btn {
	margin-top: 20px;
}
.OptionsPage .btn .ivu-btn-success {
	width: 62%;
	height: 62px;
	background: #64caab;
	border-radius: 10px;
}
.OptionsPage .btn .ivu-btn-success span {
	width: 200px;
	white-space: break-spaces;
	height: 40px;
	font-size: 14px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #ffffff;
	line-height: 20px;
}
.OptionsPage .title .title-text {
	width: 170px;
	height: 30px;
	font-size: 19px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	line-height: 30px;
}
.OptionsPage .title {
	margin-top: 68px;
}
</style>
